<template>
  <el-row :gutter="20"
          id="designProductConsStyle">
    <el-form :model="requestParams"
             label-width="150px"
             ref="form"
             :rules="rules"
             :disabled="todos==3?true:false">
      <el-col :span="24">
        <el-form-item label="设计组织:"
                      size="medium"
                      :prop="todos==3?'':'jt_org_id'">
          <el-select v-model="requestParams.jt_org_id"
                     filterable
                     placeholder="请选择"
                     clearable
                     class="select-style">
            <el-option v-for="item in designArr"
                       :key="item.jt_org_id"
                       :label="item.org_name"
                       :value="item.jt_org_id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="项目名称:"
                      size="medium"
                      :prop="todos==3?'':'project_name'">
          <el-input v-model="requestParams.project_name"
                    size="medium"
                    placeholder="请输入项目名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="装配式结构类型:"
                      size="medium"
                      :prop="todos==3?'':'struct_type'">
          <el-select v-model="requestParams.struct_type"
                     filterable
                     placeholder="请选择"
                     size="medium"
                     class="select-style">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="装配式建筑面积(m²):"
                      size="medium"
                      :prop="todos==3?'':'struct_area'">
          <!-- @keyup.native="onFilter" -->
          <el-input-number v-model="requestParams.struct_area"
                           controls-position="right"
                           size="medium"
                           :precision="2"
                           :step="0.1"
                           :min="0"
                           :max="1000000"
                           placeholder="请输入装配式建筑面积(m²)"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="预制率(%):"
                      size="medium"
                      :prop="todos==3?'':'pre_rate'">
          <el-input-number v-model="requestParams.pre_rate"
                           controls-position="right"
                           size="medium"
                           :precision="2"
                           :step="0.1"
                           :min="0"
                           :max="100"
                           placeholder="请输入预制率(%)"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="创建日期:"
                      size="medium"
                      :prop="todos==3?'':'add_time'">
          <el-date-picker v-model="requestParams.add_time"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="24"
              class="bottom-box"
              v-show="todos==3?false:true">
        <el-button size="medium"
                   @click="onCancel">取消</el-button>
        <el-button type="primary"
                   size="medium"
                   @click="onSure('form')">确定</el-button>
      </el-col>
    </el-form>
  </el-row>
</template>

<script>
import moment from 'moment'
import { DesignManageApi } from '@/services/WorkCenter'
import { standardCodeApi } from '@/services/StandardCode'
export default {
  props: {
    todos: Number,
    catchBack: Function,
    catchSave: Function,
    detailObj: Object
  },
  data () {
    return {
      designArr: [],
      options: [],
      requestParams: {
        add_time: '',
        jt_org_id: '',
        pre_rate: undefined,
        project_name: '',
        struct_type: '',
        struct_area: undefined,
        business_type: 1//1:工业化设计管理；2：工业化生产管理；3：工业化施工管理
      },
      rules: {
        jt_org_id: [{
          required: true, message: '设计组织不能为空', trigger: 'blur'
        }],
        project_name: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' }
        ],
        struct_type: [
          { required: true, message: '装配式结构类型不能为空', trigger: 'blur' }
        ],
        struct_area: [
          { required: true, message: '装配式建筑面积(m²)不能为空', trigger: 'blur' }
        ],
        pre_rate: [
          { required: true, message: '预制率不能为空', trigger: 'blur' }
        ],
        add_time: [
          { required: true, message: '创建日期不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    //过滤
    onFilter () {
      this.requestParams.struct_area = String(this.requestParams.struct_area)
      console.log('值this.requestParams.struct_area=', this.requestParams.struct_area)
      // 先把非数字的都替换掉，除了数字和.
      this.requestParams.struct_area = this.requestParams.struct_area.replace(
        /[^\d.]/g,
        ""
      );
      // requestParams.struct_area
      // 必须保证第一个为数字而不是.
      this.requestParams.struct_area = this.requestParams.struct_area.replace(
        /^\./g,
        ""
      );
      // 保证只有出现一个.而没有多个.
      this.requestParams.struct_area = this.requestParams.struct_area.replace(
        /\.{2,}/g,
        ""
      );
      // 保证.只出现一次，而不能出现两次以上
      this.requestParams.struct_area = this.requestParams.struct_area
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      let index = -1;
      for (let i in this.requestParams.struct_area) {
        if (this.requestParams.struct_area[i] === ".") {
          index = i;
        }
        //小数点最多为2位
        if (index !== -1) {
          if (i - index > 2) {
            this.requestParams.struct_area = this.requestParams.struct_area.substring(
              0,
              this.requestParams.struct_area.length - 1
            );
          }
        }
      }
    },
    handleChange (value) {
      console.log(value);
    },
    //取消
    onCancel () {
      this.$refs['form'].resetFields();
      this.catchBack();
    },
    //确定
    onSure (data) {
      this.$refs[data].validate((valid) => {
        if (valid) {
          if (this.todos == 1) {
            DesignManageApi.addProject({
              data: this.requestParams
            }).then((res) => {
              if (res.code == 0) {
                this.catchSave();
                this.$message.success('操作成功')
              }

            }).catch((error) => {
              console.log(error)
            })
          } else if (this.todos == 2) {
            DesignManageApi.editProject({
              data: {
                id: this.detailObj.jt_project_id,
                jt_org_id: this.requestParams.jt_org_id,
                pre_rate: this.requestParams.pre_rate,
                project_name: this.requestParams.project_name,
                struct_type: this.requestParams.struct_type,
                struct_area: this.requestParams.struct_area,
                add_time: this.requestParams.add_time
                // business_type:1//1:工业化设计管理；2：工业化生产管理；3：工业化施工管理
              }
            }).then((res) => {
              if (res.code == 0) {
                this.catchSave();
                this.$message.success('操作成功')
              }

            }).catch((error) => {
              console.log(error)
            })
          }
        } else {
          console.log('error')
        }
      })
    },
    getProDetail () {//详情
      return DesignManageApi.getProDetail({
        params: {
          id: this.detailObj.jt_project_id,
        }
      }).then((res) => {
        this.requestParams = res.data;
        this.requestParams.struct_type = String(this.requestParams.struct_type);
        this.requestParams.add_time = this.detailObj.add_time == null ? '' : this.detailObj.add_time.split(' ')[0]//三目判断
        console.log('详情requestParams=', this.requestParams)
      }).catch((error) => {
        console.log(error)
      })
    },
    getOrgList () {//获取组织下拉列表
      return DesignManageApi.getOrgList({
        params: {
          // type:1,//1设计，2生产，3施工
          list_or_tree: 'list'//获取list或者tree
        }
      }).then((res) => {
        this.designArr = [];
        this.designArr = res.data.list;
      }).catch((error) => {
        console.log(error)
      })
    },
    getStandardData () {//标准码
      return standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'jtStructName'
        }
      }).then((res) => {
        this.options = res.data.list;
        console.log('标准码res=', res)
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  watch: {//监听
    todos (n, o) {
      if (n == 0) {
        this.requestParams.add_time = moment().format('YYYY-MM-DD')
        this.$refs['form'].resetFields();
      } else {
        this.getStandardData();//标准码
        this.getOrgList();//设计组织下拉数据
      }
      if (n == 2 | n == 3) {
        this.getProDetail()
      }
      console.log('watch-todos=', n, 'this.requestParams=', this.requestParams, 'add_time=', this.requestParams.add_time)
    }
  },
  async created () {
    this.requestParams.add_time = moment().format('YYYY-MM-DD');//获取当前系统的时间
    await this.getStandardData();//获取装配式结构类型
    await this.getOrgList();//获取组织下拉列表
    if (this.todos == 2 | this.todos == 3) {
      await this.getProDetail();//获取详情数据
    }
    console.log('created-todos=', this.todos, 'this.requestParams=', this.requestParams, 'add_time=', this.requestParams.add_time)
  }
}
</script>

<style lang="scss" scoped>
.bottom-box {
  text-align: right;
  margin-top: 4px;
}
.select-style {
  width: 100% !important;
}
</style>